<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
</head>
<!--选择器	功能描述-->
<!--E:first-child	作为父元素的第一个子元素的元素E-->
<!--E:last-child	作为父元素的最后一个子元素的元素E-->
<!--E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd-->
<!--E:first-of-type	选择父元素内具有指定类型的第一个E元素-->
<!--E:last-of-type	选择父元素内具有指定类型的最后一个E元素-->
<!--E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素-->
<style>
    /*E:first-child	作为父元素的第一个子元素的元素E*/
    /*ul li:first-child{*/
    /*    background: pink;*/
    /*}*/
    /*ul li:last-child{*/
    /*    background: pink;*/
    /*}*/

    /*child 在父级里从一个元素开始查找，不分类型*/
    /*type  在父级里先看类型，再看位置*/
    /*ul li:first-of-type{*/
    /*    background: red;*/
    /*}*/
    /*first-of-type  ===first-child*/
    /*nth-of-type(n)*/
    /*nth-child(n)*/
    /*先找位置,在对比类型*/
    /*body>p:nth-child(1){*/
    /*    background: red;*/
    /*}*/
    /*先找类型，在找位置*/
    body>p:nth-of-type(1){
        background: red;
    }
    /*body p:nth-of-type(1){*/
    /*    */
    /*}*/
</style>
<body>
<!--p*3+ul>li*3>p-->
<span>span1</span><br />
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>